import React, { forwardRef, useEffect, useRef, useState } from 'react';
import ProForm, {
  ProFormTextArea,
} from '@ant-design/pro-form';
import { ProFormText } from '@ant-design/pro-form';
import RECommon from '@/utils/regexp/RECommon';
import { Button, Col, Row, Space, Tag } from 'antd';
import { useModel } from 'umi';
import { ProFormDigit } from '@ant-design/pro-components';
import ModalRuleCategoryTable from './ModalTable';

const DataForm: React.FC = forwardRef((props, ref) => {
  const formRef = useRef();
  // 父权限分类弹窗表格
  let modalRuleCategoryTableRef = useRef();
  const [modalRuleCategoryVisible, handleModalRuleCategoryVisible] = useState(false);
  const [disableIdArr, setDisableIdArr] = useState([]);
  //数据模型
  const ruleCategoryModel = useModel('admin.rule_category', (model) => ({
    data: model.data,
    setData: model.setData,
    create: model.create,
    update: model.update,
  }));
  //这种方式实现模型数据异步渲染到表单
  useEffect(() => {
    let abortController = new AbortController();
    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
    if (formRef.current) {
      formRef.current.setFieldsValue(ruleCategoryModel.data);
    }
    return () => {
      abortController.abort();
    };
  }, [ruleCategoryModel.data]);

  return (
    <>
      <ProForm name={'rule_category'}
        formRef={formRef}
        layout={'horizontal'}
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 14 }}
        width={500}
        autoFocusFirstInput={true}
        onFinish={async (values) => {
          let res = {};
          if (values.id > 0) {
            res = await ruleCategoryModel.update(values, { notice: true });
          } else {
            res = await ruleCategoryModel.create(values, { notice: true });
          }
          await props.onSubmit(res);
        }}
        scrollToFirstError={true}
        submitter={{
          searchConfig: {
            resetText: '重置',
            submitText: '提交',
          },
          // 配置按钮的属性
          resetButtonProps: {
            style: {
              // 隐藏重置按钮
              display: 'none',
            },
          },
          submitButtonProps: {},
          // 自定义整个区域
          render: (props, doms) => {
            return (
              <Row>
                <Col span={14} offset={8}>
                  <Space>{doms}</Space>
                </Col>
              </Row>
            );
          },
        }}
      >
        <ProFormText name="id" hidden label="id" />
        <ProFormText
          label="标识"
          name="mark"
          initialValue=""
          placeholder="请输入标识"
          tooltip={RECommon.text(1, 50, 2).msg}
          rules={[
            {
              type: 'string',
              required: true,
              pattern: RECommon.text(1, 50, 2).reg,
              message: RECommon.text(1, 50, 2).msg,
            },
          ]}
        />
        <ProFormText
          label="权限分类名"
          name="name"
          initialValue=""
          placeholder="请输入权限分类名"
          tooltip={RECommon.text(1, 50, 3).msg}
          rules={[
            {
              type: 'string',
              pattern: RECommon.text(1, 50, 3).reg,
              message: RECommon.text(1, 50, 3).msg,
            },
          ]}
        />
        <ProFormText
          label="父权限分类"
          name="pid"
          initialValue=""
          hideInSearch={true}
        >
          {
            ruleCategoryModel.data.father && ruleCategoryModel.data.father.name &&
            <Tag color="#55acee" style={{ margin: '2px' }} closable onClose={(e) => {
              const data = {...ruleCategoryModel.data};
              data.pid = 0;
              data.father = {};
              ruleCategoryModel.setData(data);
            }}>{ruleCategoryModel.data.father.name}</Tag>
          }
          <Button onClick={async () => {
            if (ruleCategoryModel.data.id) {
              setDisableIdArr([ruleCategoryModel.data.id])
            }
            handleModalRuleCategoryVisible(true);
          }}>选择</Button>
        </ProFormText>
        <ProFormDigit width="xs" name="sort" label="排序" initialValue={0} />
        <ProFormTextArea name="remark" label="备注" initialValue=""
          tooltip={RECommon.text(1, 200, 6).msg}
          rules={[
            {
              type: 'string',
              pattern: RECommon.text(1, 50, 6).reg,
              message: RECommon.text(1, 50, 6).msg,
            },
          ]} />
      </ProForm>

      <ModalRuleCategoryTable
        ref={modalRuleCategoryTableRef}
        tableProds={{
          search: {
            exclude_ids: disableIdArr.join(',')
          },
          columns: ['mark', 'name', 'created_at', 'operate'],
          operate: {
            //单选定义
            oneChoice: true,
            oneChoiceCall: async (param) => {
              const data = {...ruleCategoryModel.data};
              data.pid = param.id;
              data.father = param;
              ruleCategoryModel.setData(data);
              handleModalRuleCategoryVisible(false);
            },
          }
        }}
        onCancel={() => {
          handleModalRuleCategoryVisible(false);
        }}
        modalVisible={modalRuleCategoryVisible}
      />
    </>
  );
});

export default DataForm;
